<template>
  <div class="el-sidebar">
    <el-row>
<!--      行的宽度为24，遍历catefories数组 item是遍历的元素，index是元素的索引，元素的索引作为key-->
      <el-col :span="24" v-for="item in categories" :key="item.groupId">
<!--        Vue Router的组件，用于创建一个导航链接。点击这个链接时，不会重新加载页面，而是导航到应用内的另一个路由。
            to是绑定属性，定义了导航的目标地址。query是一个对象，定义了要附加到URL的查询参数
            item是当前遍历到的categories数组中的元素。-->
        <router-link :to="{ path: '/buy', query: { product: item.groupId } }">
          <div class="grid-content">{{ item.groupName }}</div>
        </router-link>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from "@/utils/request"

export default {
  data() {
    return {
      categories: [] // 用于存储从后端获取的花卉记录
    };
  },
  created() {
    this.fetchFlowerRecords();
  },
  methods: {
    async fetchFlowerRecords() {
      request.get("/group/page").then(res => {
        this.categories = res.data.records
        console.log(res.data.records)
      })
    }
  }
};

</script>

<style scoped>
.el-sidebar {
  width: 170px;
  text-align: center;
  margin-left: 20px;
}
.el-col {
  //border-radius: 4px;
  background-color: #bebebe;
  margin-top: 7px;
  height: 60px;
}
.el-col a{
  text-decoration: none;

}
.el-col:hover{
  background-color: #f2594b;
}
.grid-content {
  //min-height: 50px;
  line-height: 60px;
  color: #0e0c0c;
}
.grid-content:hover{
  color: #e0e0e0;
}

</style>

